接續昨天的內容,要來說useRef的另一個用途。
useRef可以讓我們快速地抓到DOM元素,這也是useRef最常被使用的功能。
function App(){
const [name,setName]=useState('')
const inputRef = useRef()
function check(){
console.log(inputRef.current)
}
return(
<>
<input ref={inputRef} value={name} onChange={e=>setName(e.target.value)}/>
<div>My name is {name}</div>
<button onClick={check}>check useRef</button>
</>
)
}
首先,建立一個useRef在inputRef變數上,接著在input身上加上ref屬性等於{inputRef},如此一來就可以抓到input這個DOM了!
可以用範例連結查看一下點擊按鈕後可以看到DOM本人。
<input value="">
由於useRef帶來的便利,會使我們容易犯下濫用他的錯誤,我們可能會在ref中控制他的值或是添加內容..等。以上面例子來說,若直接在check函式中改變DOM的value,那麼會發現{name}會維持原先的樣子,並不會因我們使用的ref而變動數值,由此可見這樣的方式會造成實際的DOM會和useRef的DOM內容產生不一致,這點是我們要特別小心的。